import React from "react";
import MonacoEditor from 'react-monaco-editor';
import { Button, Input } from "antd";
import "./index.less";

interface IVMonacoEditorState {
  code: string;
}
interface IVMonacoEditorProps {
  value?: string;
  onClose?: () => any;
  onChange?: (code: any) => any;
}
export default class VMonacoEditor extends React.Component<IVMonacoEditorProps, IVMonacoEditorState> {
  constructor(props: IVMonacoEditorProps) {
    super(props);
    this.state = {
      code: props.value
    }
  }
  render() {
    const { onClose, onChange } = this.props;
    const { code } = this.state;
    return <div className="visbar-blueprint-monaco">
      <div className="monaco-editor-main">
        <Input className="readonly-text" value="function processFunction(data){" disabled={true} />
        <MonacoEditor
          width="100%"
          height="100%"
          language="javascript"
          theme="vs-dark"
          className="visbar-blueprint-editor"
          options={{ lineNumbers: "off" }}
          value={code}
          onChange={(value) => this.setState({ code: value })}
        />
        <Input className="readonly-text" value="}" disabled={true} />
        <div className="operate-btn">
          <Button type="primary" onClick={() => { onChange && onChange(code); onClose && onClose() }}>保存</Button>
          <Button onClick={onClose}>取消</Button>
        </div>
      </div>
    </div>
  }
}